<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- {{rootcount}}
    <hr>
    <button-counter :initnum="first" v-on:countchange="handleChange"></button-counter>
    <button-counter :initnum="2"></button-counter>
    <button-counter :initnum="3"></button-counter> -->
    <!-- <blog-post title="title context"></blog-post> -->
    <div :style="{fontSize:fontsize+'px'}">
      <blog-post @enlarge="changeFontsize" v-for="item in datalist" :title="item"></blog-post>
    </div>
    
  </div>
  <script>
    //全局注册一个组件
    Vue.component('button-counter', {
      props: ['initnum'],
      data() {
        return {
          num: 10
        }
      },
      methods: {
        increment(n) {
          this.num = parseInt(this.num) + n;
          //发送一个通知,countchange 为自定义的事件名字
          this.$emit('countchange', this.num)
        }
      },
      mounted() {
        console.log(this.initnum)
        this.num = this.initnum;
      },
      template: `
        <div>
          <h1>{{num}}</h1>
          <button @click='increment(3)'>增加</button>
        </div>
      `
    })

    Vue.component('blog-post', {
      props: ['title'],
      data() {
        return {}
      },
      template: `
      <div> 
        <p>{{title}}</p>
          <button @click="$emit('enlarge', 1)">增大文字</button>
      </div>`,
      methods: {
        chnageSize() {
          this.$emit('enlarge', 1)
        }
      }
    })

    var vm = new Vue({
      el: "#app",
      data: {
        fontsize: 20,
        rootcount: 0,
        first: 1,
        datalist: ['太原', '北京', '上海']
      },
      methods: {
        handleChange(num) {
          console.log('handleChange:', num)
          this.rootcount = num;
        },
        changeFontsize(size) {
          this.fontsize += size;
        }
      }
    })

  </script>
</body>

</html>